<!--
 * @Descripttion: 编辑预约服务
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2022-01-11 11:42:31
-->
<template>
  <div class="lb-appointment-edit-service">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <lb-classify-title
        class="form-classify"
        title="基本信息"
      ></lb-classify-title>
      <el-form
        @submit.native.prevent
        :model="serviceForm"
        :rules="serviceFormRules"
        ref="basicForm"
        label-width="180px"
        class="baseForm"
      >
        <el-form-item label="服务名称" prop="title">
          <el-input
            v-model="serviceForm.title"
            placeholder="请输入服务名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务简介" prop="desc">
          <el-input
            v-model="serviceForm.desc"
            placeholder="请输入简介内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择分类" prop="classify_id">
          <el-select v-model="serviceForm.classify_id" placeholder="请选择">
            <el-option
              v-for="item in classifyOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <lb-classify-title
        class="form-classify"
        title="相关信息"
        tips="报名人数“0”代表不限制"
      ></lb-classify-title>
      <el-form
        @submit.native.prevent
        :model="serviceForm"
        :rules="serviceFormRules"
        ref="relevantForm"
        :inline="true"
        label-width="120px"
        class="relevant-form"
      >
        <el-form-item label="报名人数限制" prop="limit">
          <el-input-number
            class="lb-input-number"
            v-model="serviceForm.limit"
            :controls="false"
            :precision="0"
            placeholder="请输入报名人数限制"
          ></el-input-number>
        </el-form-item>
        <el-form-item prop="appoint_price" label="预定价格">
          <el-input
            class="lb-input-price"
            v-model="serviceForm.appoint_price"
            placeholder="请输入价格"
          ></el-input>
        </el-form-item>
        <el-form-item prop="top" label="排序值">
          <el-input-number
            class="lb-input-number"
            v-model="serviceForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item prop="time_start" label="服务开始时间">
          <el-select
            v-model="serviceForm.time_start"
            @change="createdTimeRanges(0)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="time_range" label="服务时长">
          <el-select
            v-model="serviceForm.time_range"
            @change="createdTimeRanges(0)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in rangeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务时间段" prop="time_ranges">
          <el-select
            v-model="serviceForm.time_ranges"
            multiple
            collapse-tags
            placeholder="请选择"
          >
            <el-option
              v-for="item in seriverRangOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预定日期" prop="days">
          <el-select
            v-model="serviceForm.days"
            multiple
            collapse-tags
            placeholder="请选择"
          >
            <el-option
              v-for="item in weekOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          class="item-block"
          label="是否填写地址"
          prop="address_switch"
        >
          <el-radio-group v-model="serviceForm.address_switch">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <lb-classify-title
        class="form-classify"
        title="相关图片"
      ></lb-classify-title>
      <el-form
        @submit.native.prevent
        :model="serviceForm"
        :rules="serviceFormRules"
        ref="imgForm"
        label-width="180px"
      >
        <el-form-item label="缩略图" prop="cover">
          <lb-cover
            :fileList="serviceForm.cover"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 160 * 160</lb-tool-tips>
        </el-form-item>
        <el-form-item label="轮播图片" prop="carousel">
          <lb-cover
            type="more"
            :fileList="serviceForm.carousel"
            @selectedFiles="selectedFiles($event, 'carousel')"
            @moveFiles="moveFiles($event, 'carousel')"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 750 * 750</lb-tool-tips>
        </el-form-item>
        <el-form-item label="详情介绍" prop="content">
          <lb-ueditor
            v-model="serviceForm.content"
            :destroy="true"
          ></lb-ueditor>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: [],
      id: '',
      navTitle: '',
      serviceForm: {
        id: '',
        title: '',
        desc: '',
        classify_id: '',
        limit: '',
        appoint_price: '',
        top: '',
        time_start: 0,
        time_range: 60,
        time_ranges: [],
        days: [],
        address_switch: 0,
        cover: [],
        carousel: [],
        content: ''
      },
      serviceFormRules: {
        title: { required: true, type: 'string', message: '请输入内容', trigger: 'blur' },
        desc: { required: true, type: 'string', message: '请输入内容', trigger: 'blur' },
        classify_id: { required: true, type: 'number', message: '请选择分类', trigger: 'change' },
        limit: { required: true, type: 'number', message: '请输入内容', trigger: 'blur' },
        appoint_price: { required: true, type: 'string', message: '请输入内容', trigger: 'blur' },
        top: { required: true, type: 'number', message: '请输入内容', trigger: 'blur' },
        time_start: { required: true, type: 'number', message: '请选择分类', trigger: 'change' },
        time_range: { required: true, type: 'number', message: '请选择分类', trigger: 'change' },
        time_ranges: { required: true, type: 'array', message: '请选择', trigger: 'change' },
        days: { required: true, type: 'array', message: '请选择', trigger: 'change' },
        address_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        cover: { required: true, type: 'array', message: '请上传图片', trigger: 'change' },
        carousel: { required: true, type: 'array', message: '请上传图片', trigger: 'change' },
        content: { required: true, type: 'string', message: '请输入内容', trigger: 'blur' }
      },
      classifyOptions: [],
      timeOptions: [],
      rangeOptions: [
        {
          value: 30,
          label: '半小时'
        },
        {
          value: 60,
          label: '一小时'
        },
        {
          value: 120,
          label: '两小时'
        }
      ],
      seriverRangOptions: [],
      weekOptions: [
        {
          value: 1,
          label: '星期一'
        },
        {
          value: 2,
          label: '星期二'
        },
        {
          value: 3,
          label: '星期三'
        },
        {
          value: 4,
          label: '星期四'
        },
        {
          value: 5,
          label: '星期五'
        },
        {
          value: 6,
          label: '星期六'
        },
        {
          value: 7,
          label: '星期天'
        }
      ]
    }
  },
  created () {
    let { id } = this.$route.query
    this.navTitle = this.$t(id ? 'menu.EditService' : 'menu.AddService')
    if (id) {
      this.id = id
      this.getFormInfo(id)
    }
    this.getClassifyOptions()
    this.createdTime()
    this.createdTimeRanges(1)
  },
  methods: {
    getFormInfo (id) {
      this.$api.getAppointmentServiceFormInfo({ id }).then(res => {
        let { data } = res
        for (let key in this.serviceForm) {
          this.serviceForm[key] = data[[key]]
        }
        this.serviceForm.cover = [{ url: data.cover[0] }]
        this.serviceForm.carousel = data.carousel_text.map(item => { return { url: item } })
        this.serviceForm.time_ranges = res.data.range_text
        this.createdTimeRanges(1)
      })
    },
    getClassifyOptions () {
      this.$api.getAppointmentProSetting().then(res => {
        console.log(res)
        if (res.code === 200) {
          this.classifyOptions = res.data.cate
        }
      })
    },
    createdTime () {
      let arr = []
      for (let i = 0; i < 24; i++) {
        arr.push({ value: i, label: `${i >= 10 ? i : '0' + i}:00` })
      }
      this.timeOptions = arr
    },
    createdTimeRanges (flag) {
      console.log(flag)
      let startTime = this.serviceForm.time_start
      let rangeTime = this.serviceForm.time_range === 30 ? 0.5 : this.serviceForm.time_range === 60 ? 1 : 2
      let timeRangesArr = []
      for (let i = startTime; i < 24; i += rangeTime) {
        let sTimes = i % 1
        let eTimes = (i + rangeTime) % 1
        let sHour = Math.floor(i / 1)
        let eHour = Math.floor((i + rangeTime) / 1) === 24 ? 0 : Math.floor((i + rangeTime) / 1)
        timeRangesArr.push({
          value: `${sHour < 10 ? '0' + sHour : sHour}:${sTimes ? '30' : '00'}-${eHour < 10 ? '0' + eHour : eHour}:${eTimes ? '30' : '00'}`,
          label: `${sHour < 10 ? '0' + sHour : sHour}:${sTimes ? '30' : '00'}-${eHour < 10 ? '0' + eHour : eHour}:${eTimes ? '30' : '00'}`
        })
      }
      this.seriverRangOptions = timeRangesArr
      if (!flag) { this.serviceForm.time_ranges = [] }
    },
    getCover (img) {
      this.serviceForm.cover = img
    },
    selectedFiles (imgs, key) {
      this.serviceForm[key].push(...imgs)
    },
    moveFiles (imgs, key) {
      this.serviceForm[key] = imgs
    },
    submitFormInfo () {
      let forms = ['basicForm', 'relevantForm', 'imgForm']
      let isPass = true
      forms.forEach(item => {
        this.$refs[item].validate(valid => {
          if (!valid) isPass = false
        })
      })
      if (isPass) {
        let serviceForm = JSON.parse(JSON.stringify(this.serviceForm))
        serviceForm.time_ranges.sort()
        serviceForm.days.sort()
        serviceForm.cover = serviceForm.cover.map(item => { return item.url })
        serviceForm.carousel = serviceForm.carousel.map(item => { return item.url })
        let urlType = serviceForm.id ? 'getAppointmentServiceFormInfo' : 'addAppointmentServiceFormInfo'
        this.$api[urlType](serviceForm).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successSub'))
            this.$router.back(-1)
          }
        })
      }
    },
    goBack () {
      this.$router.back(-1)
    }
  },
  watch: {
    'serviceForm.content' (newValue, oldValue) {
      if (!oldValue && newValue) {
        this.$refs['imgForm'].clearValidate('content')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-appointment-edit-service {
  width: 100%;
  .page-main {
    .baseForm {
      .el-input,
      .el-select {
        width: 300px;
      }
    }
    .form-classify {
      margin-bottom: 24px;
    }
    .line-title {
      width: 100px;
      margin-left: 10px;
      text-align: right;
      padding-right: 16px;
      span {
        color: #f56c6c;
        margin-right: 4px;
      }
    }
    .relevant-form {
      padding-left: 60px;
      width: 1000px;
      .el-input,
      .el-input-number,
      .el-select {
        width: 200px;
      }
    }
    .item-block {
      margin-right: 50px;
    }
  }
}
</style>
